<template lang="html">
  <article id="views-order_detail">
    <Info :orderDetail="orderDetail"></Info>
    <Qrcode :qrCode="qrCode" v-if="isShowQrCode"></Qrcode>
    <Announcement></Announcement>
    <button type="button" class="order_detail-drawback" v-if="canDrawBack" @click="drawback">申请退课</button>
    <BackBtn></BackBtn>
  </article>
</template>

<script>
import utils from '@/lib/utils'
import _config from '@/constant/config'
import superagent from 'superagent'
import authMiddleWare from '@/lib/auth-middleware'

export default {
  name: 'PageOrderDetail',
  components: {
    Info: require('@/components/order_detail/info'),
    Qrcode: require('@/components/order_detail/qrcode'),
    Announcement: require('@/components/order_detail/announcement'),
    BackBtn: require('@/components/common_back_button')
  },
  data(){
    return {
      orderDetail: null,
      qrCode: ''
    }
  },
  computed: {
    isShowQrCode(){
      if(!this.orderDetail || this.orderDetail.orderStatus != 1) return false
      let interval = 1000*60*60*6//6 hours
      return Date.now() + interval > parseInt(this.orderDetail.startTime, 10)*1000
    },
    canDrawBack(){
      if(!this.orderDetail || this.orderDetail.orderStatus != 1) return false
      let interval = 1000*60*60*6//6 hours
      return Date.now() + interval < parseInt(this.orderDetail.startTime, 10)*1000
    }
  },
  methods: {
    drawback(){
      this.requestForDrawback(this.orderDetail.orderId)
      .then(data => {
        let self = this
        utils.modal({
          title: '退课成功',
          desc: '即将跳转至订单列表',
          callback: function(){
            self.$router.push({ path: '/orders' })
          }
        })
      })
      .catch(e => {
        if(!!e && e.errMsg){
          utils.modal({
            title: '退课失败',
            desc: e.errMsg,
          })
        }
      })
    },
    requestForDrawback(orderId){
      return new Promise((resolve, reject) => {
        superagent.post('/api/WxCommon/refund')
          .use(authMiddleWare())
          .query({ orderId })
          .end((err, res) => {
            if(res.ok){
              resolve(res.body.data)
            } else {
              if(!!res.body.data){
                reject(res.body.data)
              } else {
                reject('drawback error')
              }
            }
          })
      })
    },
    getOrderDetail(orderId){
      return new Promise((resolve, reject) => {
        superagent.post('/api/order/info')
          .use(authMiddleWare())
          .query({ orderId })
          .end((err, res) => {
            if(res.ok){
              resolve(res.body.data)
            } else {
              if(!!res.body.data){
                reject(res.body.data)
              } else {
                reject('getOrderDetail error')
              }
            }
          })
      })
    },
    orderStatusHelper(data){
      let orderStatus
      if(data.orderStatus === '1'){
        if(Date.now() < parseInt(data.startTime, 10)*1000){
          orderStatus = 1
        } else {
          orderStatus = 2
        }
      } else if(['4','5','6','7'].indexOf(data.orderStatus) > -1){
        orderStatus = 3
      }
      data.orderStatus = orderStatus
      return data
    },
    getQrCode({ orderId, subjectId }){
      return new Promise((resolve, reject) => {
        superagent.post('/api/order/getQR')
        .use(authMiddleWare())
        .query({
          orderId,
          subjectId
        })
        .end((err, res) => {
          if(res.ok){
            resolve(res.body.data)
          } else {
            if(!!res.body.data){
              reject(res.body.data)
            } else {
              reject(new Error('getQrCode error'))
            }
          }
        })
      })
    },
  },
  created(){
    this.getOrderDetail(this.$route.params.order_id)
    .then(data => {
      data = this.orderStatusHelper(data)
      this.orderDetail = data
      return this.getQrCode({
        orderId: this.$route.params.order_id,
        subjectId: data.subjectId
      })
    })
    .then(data => {
      this.qrCode = data.qrcode_url
    })
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
#views-order_detail{
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 78px 41px;
  padding-bottom: $backbtn-height;
  background-color: $common-black;
  .order_detail-drawback{
    margin: 0 auto;
    display: block;
    width: 308px;
    height: 75px;
    line-height: 75px;
    text-align: center;
    border-radius: 15px;
    color: #000;
    font-size: 33px;
    letter-spacing: 1Px;
    background-color: $common-red;
    &:active{
      // color: $active-font;
      background-color: $active-bg;
    }
  }
}
</style>
